<article class="cl pd-20">
    <div class="cl pd-5 bg-1 bk-gray form-box">
        <form action="" method="post" class="form form-horizontal" id="form-save-0">
            <span class="l">
                <input type="hidden" name="id" value="0">
                类别名称：<input type="text" class="input-text" name="name" value="" autocomplete="类别" style="width: 200px;">
                状态： 
                <div class="td-status-type" style="display: inline-block;">
                    <div class="switch" data-on-label="启用" data-off-label="停用" data-id="0">
                        <input type="checkbox" checked />
                    </div>
                </div>
                <input type="hidden" value="1" name="status" id="status-0">
                <button type="button" class="btn btn-primary radius" onclick="typesave(0)"><i
                        class="Hui-iconfont">&#xe600;</i> 添加类别</button>
            </span>
        </form>
    </div>
    <div class="mt-10">
        <table class="table table-border table-bordered table-bg">
            <thead>
                <tr class="text-c">
                    <!-- <th width="25">
                        <input type="checkbox" name="allcheck">
                    </th> -->
                    <th width="50px">ID</th>
                    <th>名称</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {foreach $list as $val}
                <form action="" method="post" id="form-save-{$val.id}">
                    <input type="hidden" class="input-text" value="{$val.id}" name="id">
                    <tr class="text-c">
                        <!-- <td>
                            <input type="checkbox" value="{$val.id}" name="checkbox[]">
                        </td> -->
                        <td>{$val.id}</td>
                        <td><input type="text" class="input-text" value="{$val.name}" name="name"></td>
                        <td class="td-status-type">
                            <div class="switch size-S has-switch" data-on-label="启用" data-off-label="停用"
                                data-id="{$val.id}">
                                <input type="checkbox" {if $val.status==1}checked{/if}>
                            </div>
                            <input type="hidden" value="{$val.status}" name="status" id="status-{$val.id}">
                        </td>
                        <td class="td-manage">
                            <button type="button" class="btn btn-success radius size-S" title="保存"
                                onclick="typesave('{$val.id}')"><i class="Hui-iconfont">&#xe6a7;</i> </button>
                            <button type="button" class="btn btn-danger radius size-S ml-5" title="删除"
                                onclick="deltype(this,'{$val.id}')"><i class="Hui-iconfont">&#xe6e2;</i> </button>
                        </td>
                    </tr>
                </form>
                {/foreach}
            </tbody>
        </table>
    </div>
</article>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    // 改变状态
    $('.td-status-type .switch').on('switch-change', function (e, data) {
        var id = $(this).data('id');
        var value = data.value;
        console.log(id, value);
        if (value === false) {
            $("#status-"+id).val(0);
        } else {
            $("#status-"+id).val(1);
        }
    });

    // 保存条目
    function typesave(id) {
        var data = $("#form-save-" + id).serializeArray();
        $.ajax({
            type: 'POST',
            url: 'typesave',
            data: data,
            dataType: 'json',
            success: function (res) {
                // console.log(res);
                if (res.code == 0) {
                    layer.msg(res.msg, { icon: 1, time: 500 }, function () {
                        if (id == 0) {
                            window.location.reload(); // 页面刷新
                        }
                    });
                } else {
                    layer.msg(res.msg, { icon: 5, time: 1000 });
                    return false;
                }
            }
        })
    }

    // 删除条目
    function deltype(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $.post('typedelete', {
                'id': id
            }, function (res) {
                if (res.code == 0) {
                    $(obj).parents("tr").remove();
                    layer.msg(res.msg, {
                        icon: 1,
                        time: 500
                    })
                } else {
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 1000
                    });
                    return false;
                }
                layer.close(layer.index);
            }, 'json');
        });
    }
</script>
<!--请在上方写此页面业务相关的脚本-->